<!--
 * @Descripttion: 
 * @LastEditors: xzh
 * @LastEditTime: 2024-04-22 09:45:46
-->
<template>
  <el-config-provider :locale="locale">
    <router-view />
  </el-config-provider>
</template>

<script setup lang="ts">
import { reactive, onBeforeMount, onBeforeUnmount, computed } from "vue";
import { ElConfigProvider } from "element-plus";
import { useI18n } from "vue-i18n";
import { themeEnum } from "./utils/constants/app/index.d";
import Dile_StoreAction from "./utils/cache/store";
import Dile_Methods from "./utils/methods";
const { messages } = useI18n();
/**
 * @Author: xzh
 * @Descripttion: 获取当前语言包
 * @Param:
 * @param {*} computed
 */
let locale = computed((): any => {
  //当前语言
  let { current } = Dile_StoreAction.getLanguage();
  return messages.value[current];
});

/**
 * @Author: xzh
 * @Descripttion:渲染前初始化
 * @Param:
 */
onBeforeMount(() => {
  //默认设置获取当前模式-兼容系统是否开启暗黑模式
  Dile_StoreAction.setNavbar({
    theme: !!document.querySelector(".dark") ? themeEnum.dark : themeEnum.light,
  });
  //监听尺寸
  handleResize();
  window.addEventListener("resize", handleResize);
});
/**
 * @Author: xzh
 * @Descripttion:销毁前初始化
 * @Param:
 */
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
});
/**
 * @Author: xzh
 * @Descripttion:监听尺寸
 * @Param:
 */
let handleResize = () => {
  //获取当前可见区域宽度
  let { width } = document.body.getBoundingClientRect();
  //获取手机最大宽度
  let mobileWidth = Number(
    Dile_Methods.getCssPropertyValue("--mobile-maxWidth").replace("px", "")
  );
  //设置是否手机模式
  Dile_StoreAction.setMobile(mobileWidth >= width);
};
</script>
